<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="box" width="800" height="800"></canvas>
<script type="text/javascript">
    var box=document.getElementById("box");
    var pen=box.getContext("2d");

    pen.clearRect(0,0,box.width,box.height);//清除画布

    pen.translate(400,400);

//    for(var i=300;i>=50;i-=50){
//        pen.beginPath();
//        var a=Math.floor(Math.random()*255);
//        var b=Math.floor(Math.random()*255);
//        var c=Math.floor(Math.random()*255);
//        pen.arc(0,0,i,0,Math.PI*2,true);
//        pen.fillStyle="rgb("+a+","+b+","+c+")";
//        pen.fill();
//        pen.closePath();
//        pen.stroke();
//    }



    for(var i= 1;i<=5;i++){
        pen.save();
        pen.scale(i,i);
        pen.beginPath();
        pen.arc(0,0,30,0,Math.PI*2,true);
        pen.restore();
        pen.closePath();
        pen.stroke();
    }

</script>
</body>
</html>